<script setup lang="ts">
import type { Props, Emits } from './utils/types'
import { ElMessage, ElLoading } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import APIBill from '@/api/bill'
import APIWallet from '@/api/wallet'

const dialogVisible = shallowRef(false)
const $props = defineProps<Props>()
const $emit = defineEmits<Emits>()
const formData = ref<any>({})

watch($props, (newValue) => {
    dialogVisible.value = newValue.modelValue
    formData.value.amount = newValue.amount
    formData.value.order_code = newValue.order_code
}, { immediate: true })

watch(dialogVisible, (newValue) => {
    $emit('update:modelValue', newValue)
})

function onBeforeClose() {
    dialogVisible.value = false
}
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules<any>>({
    invoice_title: [{ required: true, message: '请输入发票抬头', trigger: 'blur' }],
    title_type: [{ required: true, message: '请选择抬头类型', trigger: 'blur' }],
    type: [{ required: true, message: '请选择发票类型', trigger: 'blur' }],
    taxes_number: [{ required: true, message: '请输入统一信用代码', trigger: 'blur' }],
    send_email: [{ required: true, message: '请输入接收邮箱', trigger: 'blur' }],
})

const invoiceType = ref<any>([])
function getInvoiceType() {
    APIBill.getInvoiceType().then(({ data }) => {
        invoiceType.value = data
    })
} getInvoiceType()

function submitInvoice() {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            const loading = ElLoading.service({ lock: true })
            APIWallet.setInvoice(formData.value).then(() => {
                ElMessage.success('提交成功')
                $emit('get-list')
                onBeforeClose()
            }).finally(() => {
                loading.close()
            })
        }
    })
}
</script>

<template>
    <el-dialog class="edit-username" v-model="dialogVisible" title="开票及接收信息" width="728" destroy-on-close
        :before-close="onBeforeClose" :show-close="false">
        <template #header>
            <DialogClose title="开票及接收信息" @close="onBeforeClose" />
        </template>
        <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="auto">
            <el-form-item label="开票金额：">
                {{ formData.amount || 0 }}
            </el-form-item>
            <el-form-item label="发票抬头：" prop="invoice_title">
                <el-input v-model="formData.invoice_title" placeholder="请输入发票抬头" />
            </el-form-item>
            <el-form-item label="抬头类型：" prop="title_type">
                <el-select v-model="formData.title_type" placeholder="请选择抬头类型">
                    <el-option label="个人" value="personal"></el-option>
                    <el-option label="企业" value="company"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发票类型：" prop="type">
                <el-radio-group v-model="formData.type">
                    <el-radio v-for="item in invoiceType" :value="item.type">{{ item.title }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="统一信用代码：" prop="taxes_number">
                <el-input v-model="formData.taxes_number" placeholder="请输入统一信用代码" />
            </el-form-item>
            <el-form-item label="开户银行名称：">
                <el-input v-model="formData.bank_name" placeholder="请输入开户银行名称" />
            </el-form-item>
            <el-form-item label="基本开户账号：">
                <el-input v-model="formData.bank_number" placeholder="请输入基本开户账号" />
            </el-form-item>
            <el-form-item label="注册场所地址：">
                <el-input v-model="formData.enterprise_address" placeholder="请输入注册场所地址" />
            </el-form-item>
            <el-form-item label="注册固定电话：">
                <el-input v-model="formData.enterprise_phone" placeholder="请输入注册固定电话" />
            </el-form-item>
            <el-form-item label="接收邮箱：" prop="send_email">
                <el-input v-model="formData.send_email" placeholder="请输入接收邮箱" />
            </el-form-item>
            <el-form-item label="备注：">
                <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
            </el-form-item>
            <el-form-item>
                <button class="submit" type="button" @click="submitInvoice">
                    提交开票申请
                </button>
            </el-form-item>
        </el-form>

    </el-dialog>
</template>

<style lang="scss" scoped>
.edit-username {
    .submit {
        width: 200px;
        height: 37px;
        border-radius: 5px;
        background-color: rgba(15, 64, 245, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        border: none;
        cursor: pointer;
        margin-left: auto;
    }
}
</style>
